import React, { useEffect } from 'react';
import { createRoot } from 'react-dom/client';

const App = () => {
    useEffect(() => {
        function onGlobalVarChange(e) {

        }
        window.addEventListener("MY_GLOBAL_VAR_CHANGE", onGlobalVarChange)
        return () => window.removeEventListener("MY_GLOBAL_VAR_CHANGE", onGlobalVarChange)
    }, []);
    useEffect(() => {
        observeNav();

    }, []);

    function observeNav() {
        const menuNav = document.querySelector("#app > div.main-container > div.the-top > div.the-page > div.nav-scroll-wrap")
        observeChanges(menuNav, iFdom => {

            const activeTabDom = menuNav.querySelectorAll(".page-tag.active")
            let activeTabName = ''
            activeTabDom.forEach((dom) => {
                activeTabName = dom.innerText
            })
            window.setMyGlobalVar('activeTabName', activeTabName)
            console.log("global-listener-activeTabName", activeTabName)
        },
            { attributes: true }
        )

        const ogrdom = document.querySelector("#app > div.main-container > div.the-top > div.the-nav > div:nth-child(2) > div > div.person-info > div.right-info > div.orgName > span:nth-child(1)")
        let orgName = ogrdom.innerText
        window.setMyGlobalVar('orgName', orgName)
        console.log("global-listener-orgName", orgName)
    }


    return null;
};

const init = () => {
    const container = document.createElement('div');
    document.body.appendChild(container);
    const root = createRoot(container);
    root.render(<App />);
};

init();
